<template>
  <el-drawer
    custom-class="m7-drawer"
    :title="title"
    direction="rtl"
    :size="size"
    :append-to-body="appendToBody"
    :visible.sync="drawer"
    :destroy-on-close="destroyOnClose"
    :wrapperClosable="wrapperClosable"
    :before-close="closeDraw">
    <div class="drawer-contain" :class="containClass">
      <slot name="column"></slot>
    </div>
    <div class="more-btn" v-if="isShowMoreBtn">
      <el-button size="mini" @click="cancelFun">取消</el-button>
      <el-button size="mini" type="primary" @click="save">{{saveBtnText}}</el-button>
    </div>
  </el-drawer>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component({
  name: 'Drawer'
})
export default class Drawer extends Vue {
  @Prop({ default: () => '30%' }) private size!: string // 抽屉的宽度，默认30%
  @Prop({ default: () => false }) private drawer!: boolean // 是否显示抽屉的标识，默认关闭
  @Prop({ default: () => '' }) private title!: string // 标题
  @Prop({ default: () => true }) private destroyOnClose!: boolean // 是否在关闭的时候销毁组件，默认销毁
  @Prop({ default: () => false }) private wrapperClosable!: boolean // 点遮罩是否关闭抽屉，默认不能关闭
  @Prop({ default: () => 'rtl' }) private direction!: string // 打开抽屉的方式
  @Prop({ default: () => true }) private isShowMoreBtn!: boolean | undefined // 是否显示更多的操作按钮
  @Prop({ default: () => false }) private appendToBody!: boolean | undefined // 是否插入body
  @Prop({ default: () => '确定' }) private saveBtnText!: string | undefined // 保存按钮的文案
  @Prop({ default: () => '' }) private containClass!: string | undefined // 容器的class
  private closeDraw () { // 抽屉关闭时的回调
    this.$emit('closeDraw')
  }

  private save () { // 保存信息
    this.$emit('save')
  }

  private cancelFun () { // 点击取消
    this.$emit('cancelFun')
  }

  private deactivated () { // 组件退出弹层关闭
    this.$emit('cancelFun')
  }
}
</script>
<style lang="stylus" scoped>
.m7-drawer
  position relative
  .drawer-contain
    height calc(100vh - 80px)
    overflow auto
    padding 24px
  .more-btn
    width 100%
    position absolute
    bottom 0px
    height 56px
    line-height 56px
    background #fff
    z-index 20
    text-align right
    padding-right 20px
</style>
